<template>
  <div class="components-wrap">
    <div class="list">
      <div
        v-for="item in list"
        :key="item.id"
        class="item"
        hover-class="hover"
        hover-start-time="0"
        hover-stay-time="0"
        @click="handleGoToStart(item)">
        <div class="left">
          <div class="icon">
            <img :src="generateImgUrl(item.coverImgPath)" class="img" mode="aspectFill" />
          </div>
          <div class="text">
            <div class="title">
              <span class="tag" v-if="item.type">{{ item.type }}</span>
              {{ item.title }}
            </div>
            <div class="msg">
              <div class="msg-item">
                发起人: {{ item.crtUser }}
              </div>
              <div class="msg-item">
                时间: {{ item.crtTime }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { generateImgUrl, formatDate } from '@/utils'
import dealAddress from '@/utils/dealAddress'

export default {
  props: {
    list: {
      type: Array,
      required: true,
    },
    isShowSign: {
      type: Boolean,
      default: false,
    },
    isEnd: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      generateImgUrl,
      dealAddress,
      formatDate,
    }
  },
  methods: {
    handleGoToStart (item) {
      uni.navigateTo({
        url: `/pages/voteDetail/index?id=${item.id}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.components-wrap {
	.list {
		background: #fff;

		.item {
			display: flex;
			overflow: hidden;
			padding: 15px;
			border-bottom: 1px solid #fbf9f9;

			&.hover {
				background: #f8f8f8;
			}

			.left {
				@include omit;
				display: flex;
				align-items: center;

				.icon {
					margin-right: 15px;

					.img {
						width: 82px;
						height: 82px;
						border-radius: 5px;
					}
				}

				.title {
					width: 500rpx;
					@include omit;
					font-size: $fz-l;
				}

				.msg {
					font-size: $fz-s;
					color: #999;

					.msg-item {
						margin-top: 5px;
						@include omit;
					}
				}

				.tag {
					display: inline-block;
					margin-right: 5px;
					padding: 0 2px;
					border: 1px solid #d1272f;
					border-radius: 3px;
					line-height: 15px;
					font-size: $fz-xs;
					color: #d1272f;
					transform: translateY(-2px);
				}
			}
		}
	}
}
</style>
